<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="bootstrap.css" rel="stylesheet">  
	<link href="bootstrap-responsive.css" rel="stylesheet">  
	<link rel="stylesheet" href="main.css" />
	<link rel="stylesheet" href="buttons.css" />
	<script type="text/javascript" src = "jquery.js"></script>	
	<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
	<script type="text/javascript" src = "bootstrap.js"></script>
	<script type="text/javascript" src = "JS/tableNames.js"></script>	
    <script type="text/javascript" src = "JS/raphael-min.js"></script>     
	<script type="text/javascript" src = "JS/itGraph.js"></script>
    <script type="text/javascript" src="JS/itService.js"></script>
            <script type="text/javascript" src="JS/g.raphael-min.js"></script>    
          
        <script type="text/javascript" src="JS/g.bar-min.js"></script>   
	<script>
	
		function showDimensions(num){
			var dropdown = document.getElementById('dropdown_factTables' + num);
			
			if(dropdown.style.display == 'table'){
				dropdown.style.display = 'none';
			}else {
				dropdown.style.display = 'table';                    
			}
		}
		
		function showAtributes(num){
			var dropdown = document.getElementById('dropdown_dimensions' + num);
			
			if(dropdown.style.display == 'table') {
				dropdown.style.display = 'none';
			}else {
				dropdown.style.display = 'table';                    
			}
		}

		function showSidebar() {
			var sidebar = document.getElementById('sidebarHidden');
			
			if(sidebar.style.display == 'none') {
				console.log("blabla");
				sidebar.style.display = 'table';
			
			} else {
			
				sidebar.style.display = 'none';
			
			}
		
		}

	</script>
	
	<script>
    
    var itGraph;
        window.onload = function() {
            
            /*ktGraph = new itBarGraph();
            ktGraph.x = 10;
            ktGraph.y = 30;
            ktGraph.height = 500;
            ktGraph.width = 750;*/
            
            var r = new Raphael(document.getElementById('canvas_container'), $(".graph").width(), 270);
            
            itGraph = new itGraph($(".graph").width(), 270, r);

        }
    
		var graphAtributes = new Array();
		var j = 0;
		
        var generateDimensionsRequest = new Array();
        
		$(window).load(function() {
		
			$(".box-light-blue").draggable({revert:true});
			
			$('.droppableDiv').droppable({
			
				drop: function (event, ui) {
					                                 
					var draggableTitle = ui.draggable.attr('name');
                    var objectID = ui.draggable.attr("id");
                    
					//console.log(draggableTitle);
					
					drawDiv(draggableTitle, objectID);
					
                    generateDimensionsRequest.push(dimensionDictionary[objectID]);
					
					graphAtributes.push(draggableTitle);
					console.log(graphAtributes);
                    sendData();
					
					//buttonDone.style.display = 'table';
				}
			
			
			});
		
		});	
		
		function drawDiv (name, id) {
		
			$("#droppable").append (
			 
			'<div class =' + j + '>'
			
				+ '<div class = "boxDropped" name = ' + name +'>' + name + '</div>'
				+ '<div id = "' + name + '"class = "cancel" onclick = "removeFromGraph('+ j +'); removeDimension(' + id + ');">X</div>'
			    + '</div>'
			);
			console.log(j);
			j++;
			/*
			window.setTimeout(deleteDiv, 1100);
			
			function deleteDiv () {
			
				$("#box").style.display = 'none';
			
			}
			*/
		}
		
        function removeDimension(id)
         {
             for(i=0; i<generateDimensionsRequest.length; i++)
             {
                 if (generateDimensionsRequest[i].id == id)
                 {
                    generateDimensionsRequest.splice(i, 1); 
                 }
             }
             sendData();
         }
		
		function removeFromGraph(deleteName) {
			
			console.log(deleteName);
			$('[class = ' + deleteName + ']').remove();
			//$('').remove();
		
		}
		
		function sendData() {
            itGraph.ClearGraph();
		    
            jsonVar = new Object();
            jsonVar.table = "fpost";
            jsonVar.dimensions = new Array();
             for(i=0; i<generateDimensionsRequest.length; i++)
             {
                  jsonVar.dimensions.push(generateDimensionsRequest[i].object);
             }
            
            jsonVar.measures = new Array();
        
            measure = new Object();
            
            measure.agregatefunction = "AVG";
            measure.sqlname = "numLikes";
            
            jsonVar.measures.push(measure);
            
               
            service = new itService();
               
            data = service.GetData(jsonVar, 
                function(d){
                    itGraph.graph.SetData(d);
                } , function(a){}
            );
            
            
            
            console.log(jsonVar);
			//alert("Redosljed stavljanja podataka na graf: " + graphAtributes);
		
		}
	
		
	</script>
	
	<script type="text/javascript">
	
	
	
	</script>
	
	
	<!--[if lt IE 9]>
		<script src="html5shiv.js"></script>
	<![endif]-->
	
</head>

<body>
				
    <div class="navbar navbar-inverse navbar-fixed-top">
		<div class="navbar-inner">
		
			<!--nav collapse-->
			<div class="container-fluid"> 
				
				<!--Button on mobile and tablet-->
				<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button> <!--end of button-->
		  
		  <!--Logo-->
          <a class="brand" href="#"></a><!--end of logo-->
		  
		  <!--nav collapse-->
          <div class="nav-collapse collapse">
			
				<!-- LogIn to right-->
				<p class="navbar-text pull-right visible-desktop">
				  <a href="">Log in</a>
				</p><!--end of LogIn-->
				
				<!--navigation-->
				<ul class="nav">          		 

					<li class="active"><a href="#">Home</a></li>
					<li class="#"><a href="#">Dashboard</a></li>
					<li class="#"><a href="#">Prices</a></li>
					<li class="#"><a href="#">About us</a></li>
					<li class="#"><a href="#">Contact Us</a></li>
					<li class="hidden-desktop"><a href="#">Log in</a></li>
				
				</ul><!--end of navigation-->
			</div>       
				
          </div><!--end of nav-collapse -->
        </div>
      </div>
	
	<div id = "wrap">
		
		<!--button show sidebar on mobile and tablet-->
		<div class = "wrapButton hidden-desktop">
			<button id = "mobile-tablet" class = "hidden-desktop" onclick = "showSidebar()"></button>
		</div><!--end of button show sidebar-->
		
	<div id = "sidebarHidden" class = "sidebar">
		<!--
		<div class = "oneRow">
		
			<div class = "box-out"> 
				
				<div id="dropdownButton" class="box" name = "fact table" onclick="showDimensions(0)">Fact Table 1</div>
		 
				<ul id="dropdown_factTables0" class="hiddenBox">
					
					<li> 
					 
					 <div id="dropdownButton1" class="box" name = "dimension table" onclick="showAtributes(0)">Dimension table 1</div>
					
								<ul id="dropdown_dimensions0" class="hiddenBox">
								
									<li> <div class="box"name = "atribut1" >Atribute 1</div></li>
								
								</ul>
								
					 </li>
					 
					 <li> 
					 
					 <div id="dropdownButton" class="box" onclick="showAtributes(1)">Dimension table 2</div>
					
								<ul id="dropdown_dimensions1" class="hiddenBox">
								
									<li> <div class="box" >Atribute 1</div></li>
								
								</ul>
								
					 </li>
				</ul> 	
			</div>
		
		
		
			<div class = "box-out"> 
				<div id="dropdownButton" class="box" onclick="showDimensions(1)">Fact Table 2</div>
		 
				<ul id="dropdown_factTables1" class="hiddenBox">
					
					<li> 
					 
					 <div id="dropdownButton" class="box" onclick="showAtributes(2)">Dimension table 1</div>
					
								<ul id="dropdown_dimensions2" class="hiddenBox">
								
									<li> <div class="box" >Atribute 1</div ></li>
									<li> <div  class="box" >Atribute 2</div></li>
									<li> <div  class="box" >Atribute 3</div></li>
								
								</ul>

					 </li>
				</ul> 	
			</div>
		
		</div>
		-->
		
		<script>
			var factTables = getFactTablesNames();
			console.log(factTables);
			console.log(factTables.length)
			
			//variable used to set classes on attributes
			var index = 0;
			
            var indexID = 0;
            var dimensionDictionary = new Array();
            
			for(var i = 0; i <= factTables.length; i++) {
				if(i == 0 || i % 2 == 0) {
					$(".sidebar").append(
						'<div class = "oneRow"></div>'
					);
				}
			}
			
			for(var i = 0; i < factTables.length; i++) {
				//factTable
				var factTable = factTables[i];
				
			    $(".oneRow").append(
			    
				    '<div class = "box-out"> <div id="dropdownButton" class="box" name = '+ factTable + ' onclick="showDimensions('+ index +')">'+ factTable +'</div>'
				    + '<ul id="dropdown_factTables'+ i + '" class="hiddenBox">'
				    + '</div>' 
			    
			    );
			
				// dimension tables for specific fact table
				var dimensionTables = getDimensionTablesNames (factTables[i]);

				for(var k = 0; k < dimensionTables.length; k++) {
				
					//dimension table name
                    var dimensionTable = dimensionTables[k].dimensionsqlname;
					console.log(dimensionTable);
					console.log("Dodajem u #dropdown_factTables" + i);
                    
					$("#dropdown_factTables"+ i).append (
					    '<li>'
					    + '<div id="dropdownButton'+ index +'" class="box" name = "'+ dimensionTable + '" onclick="showAtributes('+ index +')">'+ dimensionTable +'</div>'
					    +'<ul id="dropdown_dimensions'+ index +'" class="hiddenBox">'
					    + '</li>'
					    + '</ul>'
					);
					
					//dimension[i] atributes
					var dimensionAtributes = dimensionTables[k].dimensionattributes;
					
					for(var j= 0; j < dimensionAtributes.length; j++) {
						$("#dropdown_dimensions" + index).append (
						    '<li> <div class="box box-light-blue" id="' + indexID + '" name = "'+ dimensionAtributes[j] +'" >'+ dimensionAtributes[j] +'</div></li>'
						);
                        
                        var forDictionary = new Object();
                        forDictionary.id = indexID;
                        var dimen = new Object();
                        dimen.sqlname = dimensionTables[k].dimensionsqlname;
                        dimen.dimensionsqlname = dimensionAtributes[j];
                        forDictionary.object = dimen;
                        
                        dimensionDictionary[indexID] = forDictionary;
                        
                        indexID++;
					}
					index++;
				}
			}
			
			console.log(dimensionDictionary);
			
		
		</script>
			
		
	
		
	<!--	
	<img src="sdiGraph.png" class = "visible-desktop" alt="" />
		-->

	</div><!--end of sidebar-->
	
		<!--drawing-->
		<div class = "drawing">
			
			<div class = "graph" id="canvas_container">
			
			</div>
			
			<div id = "droppable" class = "droppableDiv"></div>
			
            <br/>
			<!--button done-->
			<button  id = "buttonDone" onClick = "sendData()">Done</button><!--end of done button-->
			
			
			
		</div><!--end of drawing-->

	</div><!--end of wrap-->
	
	<!--footer-->
	<footer  class = "footer">
	</footer><!--end of footer-->

	
    
	

	
		
	

   
	



	
</body>
</html>